<template>
    <div class="bigBox">
        <div v-if="props_imageArr">
            <el-image v-if="typeof props_imageArr === 'string'" style="width: 100px; height: 100px" :src="props_imageArr"></el-image>
            <div v-else style="display: flex;">
                <div class="image-list" v-for="item in props_imageArr">  
                    <span class="close" @click="removeImageHandler(item as string)"><el-icon><Close /></el-icon></span>
                    <el-image style="width: 100px; height: 100px" :src="item"></el-image>
                </div>
            </div>
        </div>

        <div class="plusButton" @click="openDialog">
            <el-icon>
                <Plus />
            </el-icon>
        </div>
        <el-dialog v-model="dialogTableVisible" title="选择图片" :width="1000">
            <el-container class="box">
                <el-container style="width:100%;height:100%">
                    <!-- 导航 -->
                    <gallery-aside @change="changeHandler"></gallery-aside>
                    <el-main class="image-main">
                        <!-- 主体内容 -->
                        <gallery-main ref="galleryClassRef" :limit="5" @change-handler="changeItemHandler"></gallery-main>
                    </el-main>

                </el-container>
                <div>
                    <el-button type="primary" @click="imageItemHandler">确认</el-button>
                    <el-button type="default">取消</el-button>
                </div>
            </el-container>
        </el-dialog>
    </div>
</template>
<script setup lang='ts'>
import { ref, reactive, onMounted } from 'vue'
import galleryMain from '@/components/galleryMain.vue'
import galleryAside from '@/components/galleryAside.vue'
const dialogTableVisible = ref(false)
const galleryClassRef = ref()
const openDialog = () => dialogTableVisible.value = true
const closeDialog = () => dialogTableVisible.value = false

const emit = defineEmits(['imageItemHandler','removeImageHandler'])
const props = defineProps({
    props_imageArr: [String, Array],
    limit: {
        type: Number,
        default: 5
    }
})
defineExpose({
    openDialog,
    closeDialog
})
// 获取id
const changeHandler = (id: number) => {
    galleryClassRef.value.loadData(id)

}
// 上传图片抽屉
const uploadHandler = () => {
    galleryClassRef.value.drawerHandler()
}
// 删除当前点击图片
const removeImageHandler = (e:string) => emit('removeImageHandler',e)
const imageArr = ref() as any

const changeItemHandler = (e: any) => {
    imageArr.value = e.map((item: any) => item.url)
}
const imageItemHandler = () => {
    if(imageArr.value.length === 1)imageArr.value = imageArr.value.toString()
    closeDialog()
    emit('imageItemHandler', imageArr.value)
}
</script>
<style scoped lang='scss'>
.bigBox {
    display: flex;
}

.plusButton {
    width: 100px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    font-weight: 100;
    border: 1px solid #959191;
}

.plusButton:hover {
    background-color: #eee;
}
.image-list{
    position: relative;
    
}
.close{
    display: inline-block;
    width: 20px;
    height: 20px;
    font-size: 20px;
    position: absolute;
    background-color: rgb(191, 169, 169);
    top: 0;
    right: 0;
    z-index: 1;
    border-radius: 50%;
}
.box {
    width: 100%;
    overflow: hidden;
    background-color: #fff;
    padding: 0 10px;
    height: 500px;
    display: flex;
    flex-direction: column;

    .image-header {
        background-color: antiquewhite;
        display: flex;
        align-items: center;
    }

    .image-main {
        padding: 0;
        position: relative;
    }
}
</style>